import React, { Component } from 'react';
import { Menu } from 'antd';
import { withRouter } from 'react-router-dom';
import { UserOutlined, VideoCameraOutlined, UploadOutlined } from '@ant-design/icons';
import menus from './menus';

const { SubMenu } = Menu;
class menu extends Component {
  state = {
    pathname: this.props.history.location.pathname
  };

  menuClick = ({ key }) => {
    this.props.history.push(key);
  };

  getMenu = (item) => {
    return item.map((menu) => {
      if (menu.children) {
        return (
          <SubMenu key={menu.key} title={menu.title} icon={menu.icon}>
            {this.getMenu(menu.children)}
          </SubMenu>
        );
      } else {
        return (
          <Menu.Item key={menu.path} icon={menu.icon} component={menu.component}>
            {menu.title}
          </Menu.Item>
        );
      }
    });
  };

  render() {
    return (
      <Menu theme='dark' mode='inline' onClick={this.menuClick}>
        {this.getMenu(menus)}
      </Menu>
    );
  }
}

export default withRouter(menu);
